<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网络布局总框架1-3-1</title>

    <style>
        *{margin:0;padding:0;}
        #wrap{width:100%;height:auto;}
        #wrap header{background: yellow;height:180px;color:#fff;font-size:32px;text-align:center;line-height:180px;}
        #wrap nav{background: deeppink;height: 50px;color:#fff;font-size:32px;text-align:center;line-height:50px;}
        #wrap article section{width:25%;height:900px;background: chocolate;color:#fff;font-size:32px;text-align:center;float:left;}
        #wrap article article{width:60%;height:900px;background:#369;color:#fff;font-size:32px;text-align:center;float:left;}
        #wrap article aside {width:15%;height:900px;background: crimson;color:#fff;font-size:32px;text-align:center;float:left;}
        #wrap footer {width: 100%;height: 100px;background:#000;color:#fff;clear:both;text-align: center;line-height:180px;}
    </style>


</head>
<body>
<div id="wrap"
<header>网站头部</header>
<nav>导航栏</nav>
<article>
    <article>商品介绍栏</article>
    <section>主题内容</section>
    <aside>边侧栏</aside>
</article>

<footer>底部导航</footer>
</div>


</body>
</html>